﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style>
        .ui-autocomplete
        {
            max-height: 100px;
            overflow-y: auto; /* prevent horizontal scrollbar */
            overflow-x: hidden; /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }
        /* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */* html .ui-autocomplete
        {
            height: 100px;
        }
    </style>
    <link type="text/css" rel="Stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />

    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

	        var userSelectedValue = false;
        
            var theComboBox = $("#theComboBox");
            var theComboBoxButton = $("#theComboBoxButton");
            var pageMethodURL = 'Default.aspx/GetData';
            
            theComboBox.autocomplete({
			    source: callGetData,  
			    delay: 200,
			    minLength: 0,
			    select: function( event, ui ) { 
			        userSelectedValue = true;
			        //alert(ui.item.id);
			        //alert(ui.item.value);
			    }
		    });
		    
		    // This is used to enforce that the user
		    //   selects from the list
		    theComboBox.focusout(enforceSelection);
		    
		    theComboBoxButton.click(function() {
		    
		        //alert('click');
		        theComboBox.autocomplete("search","*");
		    
		    });
		    
		    function callGetData(request, response)
		    {
		        // This is used to enforce that the user
		        //   selects from the list
		        userSelectedValue = false;
        	    
		        $.ajax({
                    type: "POST",
                    url: pageMethodURL,
                    data: "{ searchTerm: '" + request.term + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        response(data.d);
                    },
                error: function(jqXHR, textStatus, errorThrown) { alert(errorThrown)}
                
                });
		    }

            function enforceSelection()
            {
                // Had to put in a little delay so that
                //   the combobox has time to set the userSelectedValue
                //   variable before attempting to check it.
                setTimeout(function () { 
                
                    if (!userSelectedValue)
                    {
                        theComboBox.val(''); 
                        theComboBox.autocomplete("search",'');
                    }
                
                },400);
            }		
			
        });
    

   
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        Try entering a "o" or "t"
        <input id="theComboBox" />
        <input id="theComboBoxButton" type="button" value="Show All" />
    </div>
    </form>
</body>
</html>
